<template>
  <div class="life-sharing-container">
    <div class="page-header">
      <a-card>
        <div class="header-content">
          <div class="left">
            <h2 class="title">生活分享</h2>
            <p class="description">分享生活点滴，记录美好瞬间</p>
          </div>
          <div class="right">
            <a-button type="primary" @click="createPost">
              <template #icon><camera-outlined /></template>
              发布动态
            </a-button>
          </div>
        </div>
      </a-card>
    </div>

    <div class="content-container">
      <a-row :gutter="16">
        <a-col :span="18">
          <a-card class="main-content">
            <div class="filter-bar">
              <a-space>
                <a-radio-group v-model:value="sortBy" button-style="solid">
                  <a-radio-button value="latest">最新发布</a-radio-button>
                  <a-radio-button value="hot">热门推荐</a-radio-button>
                  <a-radio-button value="following">关注动态</a-radio-button>
                </a-radio-group>
                <a-select
                  v-model:value="category"
                  style="width: 120px"
                  placeholder="全部分类"
                >
                  <a-select-option value="all">全部分类</a-select-option>
                  <a-select-option value="food">美食</a-select-option>
                  <a-select-option value="travel">旅行</a-select-option>
                  <a-select-option value="photography">摄影</a-select-option>
                  <a-select-option value="pets">宠物</a-select-option>
                  <a-select-option value="sports">运动</a-select-option>
                </a-select>
              </a-space>
            </div>

            <div class="post-grid">
              <a-card 
                v-for="post in posts" 
                :key="post.id"
                class="post-card hover-shadow"
                :bordered="false"
              >
                <template #cover>
                  <img :src="post.cover" :alt="post.title" class="post-image" />
                </template>
                <a-card-meta :title="post.title">
                  <template #description>
                    <div class="post-content">{{ post.content }}</div>
                    <div class="post-meta">
                      <a-space>
                        <a-avatar :src="post.author.avatar" :size="24" />
                        <span class="author">{{ post.author.name }}</span>
                        <span class="time">{{ post.createTime }}</span>
                      </a-space>
                      <div class="interaction">
                        <a-space>
                          <span><heart-outlined /> {{ post.likes }}</span>
                          <span><message-outlined /> {{ post.comments }}</span>
                          <span><star-outlined /> {{ post.favorites }}</span>
                        </a-space>
                      </div>
                    </div>
                  </template>
                </a-card-meta>
              </a-card>
            </div>

            <div class="pagination">
              <a-pagination
                v-model:current="pagination.current"
                :total="pagination.total"
                :pageSize="pagination.pageSize"
                show-quick-jumper
                show-size-changer
                :showTotal="total => `共 ${total} 条动态`"
              />
            </div>
          </a-card>
        </a-col>

        <a-col :span="6">
          <a-card title="热门话题" class="side-card">
            <template #extra><a>更多</a></template>
            <a-list :data-source="hotTopics" size="small">
              <template #renderItem="{ item }">
                <a-list-item>
                  <a class="topic-item">
                    <span class="topic-name"># {{ item.name }}</span>
                    <span class="topic-count">{{ item.count }}个讨论</span>
                  </a>
                </a-list-item>
              </template>
            </a-list>
          </a-card>

          <a-card title="推荐用户" class="side-card">
            <template #extra><a>更多</a></template>
            <a-list :data-source="recommendUsers" size="small">
              <template #renderItem="{ item }">
                <a-list-item>
                  <a-list-item-meta>
                    <template #avatar>
                      <a-avatar :src="item.avatar" />
                    </template>
                    <template #title>
                      <a>{{ item.name }}</a>
                    </template>
                    <template #description>
                      {{ item.description }}
                    </template>
                  </a-list-item-meta>
                  <a-button size="small">关注</a-button>
                </a-list-item>
              </template>
            </a-list>
          </a-card>
        </a-col>
      </a-row>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { 
  CameraOutlined,
  HeartOutlined,
  MessageOutlined,
  StarOutlined
} from '@ant-design/icons-vue'

const router = useRouter()
const sortBy = ref('latest')
const category = ref('all')

// 模拟数据
const posts = ref([
  {
    id: 1,
    title: '周末探店 | 这家咖啡店也太棒了',
    content: '偶然发现的一家小店，环境超级好，咖啡也很赞...',
    cover: 'https://picsum.photos/400/300',
    author: {
      name: '美食达人',
      avatar: 'https://joeschmoe.io/api/v1/random'
    },
    createTime: '2小时前',
    likes: 128,
    comments: 32,
    favorites: 18
  },
  // 更多动态数据...
])

const hotTopics = [
  { name: '周末美食探店', count: 2834 },
  { name: '春日踏青', count: 2156 },
  { name: '宠物日常', count: 1892 },
  { name: '运动健身', count: 1654 },
  { name: '旅行记录', count: 1432 }
]

const recommendUsers = [
  {
    name: '美食达人',
    avatar: 'https://joeschmoe.io/api/v1/random',
    description: '美食博主 | 探店达人'
  },
  {
    name: '旅行摄影师',
    avatar: 'https://joeschmoe.io/api/v1/random',
    description: '风光摄影 | 旅行达人'
  }
]

const pagination = {
  current: 1,
  total: 100,
  pageSize: 12
}

// 创建动态
const createPost = () => {
  router.push('/create-post')
}
</script>

<style lang="scss" scoped>
.life-sharing-container {
  background: #f0f2f5;
  min-height: calc(100vh - 64px);
  padding-top: 24px;

  .page-header {
    margin-bottom: 24px;
    padding: 0 24px;

    .header-content {
      display: flex;
      justify-content: space-between;
      align-items: center;

      .left {
        .title {
          margin: 0;
          font-size: 24px;
          font-weight: bold;
          background: linear-gradient(45deg, #ff4d4f, #ff7a45);
          -webkit-background-clip: text;
          color: transparent;
        }

        .description {
          margin: 8px 0 0;
          color: rgba(0, 0, 0, 0.45);
        }
      }
    }
  }

  .content-container {
    padding: 0 24px;
    max-width: 1400px;
    margin: 0 auto;

    .main-content {
      margin-bottom: 24px;

      .filter-bar {
        margin-bottom: 24px;
      }

      .post-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
        gap: 16px;
        margin-bottom: 24px;

        .post-card {
          transition: all 0.3s ease;

          .post-image {
            height: 200px;
            object-fit: cover;
            border-radius: 8px 8px 0 0;
          }

          .post-content {
            margin: 8px 0;
            color: rgba(0, 0, 0, 0.45);
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
          }

          .post-meta {
            margin-top: 12px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            color: rgba(0, 0, 0, 0.45);
            font-size: 14px;

            .author {
              color: rgba(0, 0, 0, 0.65);
              font-weight: 500;
            }

            .time {
              color: rgba(0, 0, 0, 0.45);
            }

            .interaction {
              display: flex;
              gap: 16px;
            }
          }
        }
      }

      .pagination {
        text-align: center;
        margin-top: 24px;
      }
    }

    .side-card {
      margin-bottom: 16px;

      .topic-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        color: rgba(0, 0, 0, 0.85);

        .topic-name {
          font-weight: 500;
        }

        .topic-count {
          color: rgba(0, 0, 0, 0.45);
          font-size: 12px;
        }
      }
    }
  }
}
</style> 